<template>
  <div class="container">
    <el-card>
      <el-row type="flex">
        <div style="width: 80px; margin-top: 9px"><span>关键字</span></div>
        <el-input v-model="textdsa" style="width: 300px"></el-input>

        <el-col justify="after">
          <el-button style="float: right" @click="removeFn">清除</el-button>
          <el-button type="primary" style="float: right" @click="searchFn"
            >搜索</el-button
          >
        </el-col>
      </el-row>
      <el-alert
        style="margin: 20px 0"
        :title="'数据一共' + amount + '条'"
        type="info"
        show-icon
      >
      </el-alert>
      <el-table :data="list" stripe style="width: 100%">
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          :formatter="formatterQuestionType"
        >
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号">
          <template v-slot="{ row }">
            <div v-for="(item, index) in row.questionIDs" :key="index">
              <a
                href="#"
                @click="popupDetails(row, index)"
                style="color: rgb(0, 105, 125)"
                >{{ item.number }}</a
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间"> </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column prop="address" label="操作" min-width="100" align="left">
          <template v-slot="{ row }">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteFn(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页 -->
      <fengYe
        :page="page"
        :counts="counts"
        :pagesize="pagesize"
        @pageChange="pageChange"
        @pageSizeChange="pageSizeChange"
      ></fengYe>
    </el-card>
    <questionsPreview
      :isShow.sync="isShow"
      :details="detailsObj"
    ></questionsPreview>
  </div>
</template>

<script>
import questionsPreview from '.././components/questions-preview'
import { questionType } from '../../api/hmmm/constants'
import fengYe from '../components/fengye.vue'
import { randoms, removeRandoms, detail } from '../../api/hmmm/questions'

export default {
  components: {
    fengYe,
    questionsPreview
  },
  data () {
    return {
      list: [], // 用来接收组题列表的数据
      counts: 0, // 总条数
      pagesize: 10, // 每页的条数
      amount: 0, // 搜索出来的数据
      page: 1, // 当前页码
      paginationPage: 1,
      paginationPagesize: 10,
      textdsa: '', // 输入框文字
      isShow: false,
      detailsObj: {}

    }
  },
  created () {
    this.getrandoms()
  },
  watch: {
    list (newName, oldname) {
      this.amount = newName.length
    }
  },
  methods: {
    async   getrandoms () {
      const { data } = await randoms({
        page: this.paginationPage,
        pagesize: this.paginationPagesize
      })
      this.counts = data.counts
      this.page = data.page
      this.pagesize = data.pagesize
      this.list = data.items
    },

    pageChange (pageNum) {
      this.paginationPage = pageNum
      if (this.textdsa) {
        this.searchFn()
      } else {
        this.getrandoms()
      }
    },
    pageSizeChange (pageSize) {
      this.paginationPagesize = pageSize
      if (this.textdsa) {
        this.searchFn()
      } else {
        this.getrandoms()
      }
    },
    formatterQuestionType (row, column, cellValue, index) {
      const obj = questionType.find(item => item.value * 1 === cellValue * 1)
      return obj ? obj.label : '未知'
    },
    deleteFn (id) {
      // 1:二次确认是否删除
      this.$confirm('确认删除吗').then(() => {
        // 2: 调用删除接口
        return removeRandoms(id)
      }).then(async () => {
        // 3: 重新渲染数据
        await this.getrandoms()
        // 4: 提醒用户删除成功
        this.$message.success('删除成功')
      })
    },
    removeFn () {
      this.textdsa = ''
      this.getrandoms()
    },
    async searchFn () {
      const { data } = await randoms({
        page: this.paginationPage,
        pagesize: this.paginationPagesize,
        keyword: this.textdsa
      })
      console.log(data)
      this.counts = data.counts
      this.page = data.page
      this.pagesize = data.pagesize
      this.list = data.items
    },

    popupDetails (row, index) {
      this.isShow = true
      console.log(row.questionIDs[index].id)
      detail(row.questionIDs[index]).then(res => {
        this.detailsObj = res.data
      })
    }
  }
}
</script>

<style scoped lang='less'></style>
